<template>
  <div>
    <div class="lf-footer" :style="{ backgroundImage: `url(${require('../../assets/images/supplierDisplayCenter/foot.png')})` }">
      <div class="w1200">
        <div class="lf-footer-select-link">
          <template v-for="(item,index) in footerNavLinkList.list">
            <a-select :value="footerNavLinkList[item.categoryName][0].id" style="width:200px;" :key="index"
                      v-if="footerNavLinkList[item.categoryName].length>0">
              <a-select-option @click="selectOption(item1)"
                               v-for="(item1,index1) in footerNavLinkList[item.categoryName]"
                               :key="index1" :value="item1.id">{{ item1.title }}
              </a-select-option>
            </a-select>
          </template>
        </div>
        <div class="footer-content">
          <div style="padding-bottom: 15px;border-bottom: 1px solid white;margin-top: 30px;margin-bottom: 15px;">
            <span class="company-name">深圳交易集团有限公司</span>
            <span>通讯地址：深圳市南山区沙河西路1809号深圳湾科技生态园一区2栋A座11楼</span>
          </div>
          <a-row>
            <a-col :span="10">
              <p>阳光采购平台客服电话：0755-88653300，转接依次按2，按1，再按1。</p>
              <p>系统操作技术支持电话：010-86392341 平台版本号：V1.0</p>
              <p>保证金收退及发票管理联系电话：0755-88653300，转接依次按2，按1，再按2。</p>
              <p>CA发票联系电话：0755-88653300，转接依次按2，按1，再按3。</p>
            </a-col>
            <a-col :span="10" :offset="4">
              <p>业务委托联系电话：15323406100、13933811283、18682439056、13828771121</p>
              <p>企业注册信息审核电话：0755-88653300，转接依次按2，按1，再按4。</p>
              <p>公告公示平台复核电话：0755-88653300，转接依次按2，按1，再按5。</p>
              <p>CA申请联系电话：0755-88653300，转接依次按2，按1，再按6。</p>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <div style="padding: 20px 0;background: #323232;color: white;" v-if="footerContent" v-html="footerContent"></div>
  </div>
</template>
<script>

import { externalLinklist } from '@/api/portal'

export default {
  components: {},
  name: 'SupplierFooter',
  data() {
    return {
      footImg: '../../assets/images/supplierDisplayCenter/foot.png',
      footerNavLinkList: {list: []},
      footerContent: ''
    }
  },
  props: {},
  created() {
  },
  mounted() {
    this.getExternalLinklist()
    let portalSettingsInfo = JSON.parse(localStorage.getItem("portalSettingsInfo"))
    this.footerContent = portalSettingsInfo.footerContent
  },
  methods: {
    selectOption(record) {
      if (record.url) {
        window.open(record.url, '_blank');

      }
    },
    getExternalLinklist() {
      externalLinklist().then(response => {
          if (response.code == 0) {
            this.footerNavLinkList = response.data
          }
        })
    },

  }
}
</script>
<style lang="scss" scoped>
/deep/ .ant-select-selection {
  background: rgba(255, 255, 255, 0.1);
}

/deep/ .ant-select {
  color: #fff;
}

.lf-footer {
  width: 100%;
  margin-top: 14px;
  padding-bottom: 30px;
  background-image: url(require('../../assets/images/supplierDisplayCenter/foot.png'));

}

.lf-footer-select-link {
  display: flex;
  justify-content:flex-start;
  gap: 10px;
  padding: 30px 0 0;
}

.lf-footer-link {
  height: 240px;
  // background-image: url('../../../assets/images/homePageLf/footbj.png');
  background-size: cover;
  display: flex;
  justify-content: center;

  .lf-footer-link-type {
    display: inline-block;
    position: relative;
    width: 220px;
    color: white;
    margin-top: 40px;
    // border-right: 1px dashed white;
    text-align: center;

    .footer-link-desc {
      display: inline-block;
      font-size: 16px;
      line-height: 16px;

      span {
        position: relative;

        img {
          position: absolute;
          top: 0px;
          left: -36px;
        }
      }
    }

    ul {
      margin-top: 30px;

      li {
        margin-top: 20px;
        line-height: 14px;
      }

      li:first-child {
        margin-top: 0;
      }
    }
  }

  .lf-foot-link-link {
    display: inline-block;
    margin-left: 60px;
    width: 220px;
    color: white;
    margin-top: 40px;
    text-align: left;

    > div:nth-child(2) {
      margin-top: 37px;
    }

    .lf-foot-link-link-desc {
      white-space: nowrap;

      span {
        font-size: 14px;
        position: relative;

        img {
          position: absolute;
          left: -36px;
          top: 0px;
        }
      }
    }

    .other-qrcode {
      img {
        height: 80px;
        width: 80px;
        margin-left: 10px;
      }

      img:first-child {
        margin-left: 0;
      }
    }
  }

  .lf-foot-link-link-qr {
    > div:not(:first-child) {
      margin-top: 20px;
    }
  }
}

.lf-footer-link-type:after {
  content: '';
  width: 1px;
  height: 160px;
  border: 1px dashed white;
  position: absolute;
  top: 0px;
  right: 0px;
}

.link-to {
  font-size: 14px;
  line-height: 14px;
  color: #ffffff;
}

.lf-footer-copyright {
  height: 54px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #646464;
  line-height: 54px;
  text-align: center;
}

.footer-content {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  color: #FFFFFF;

  .company-name {
    font-size: 16px;
    margin-right: 40px;
    font-family: PingFangSC-Medium, sans-serif;
  }
}

</style>
